<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- 导入jquery -->
    <script src="js/jquery-3.5.1.min.js"></script>
    <title>登陆页面</title>
</head>
<body>
    <!-- style标签是全局（公有），style属性只对当前元素生效（私有） -->
    <div class="container" style="width: 300px; margin-top: 50px;" >
            <fieldset>
                <legend>登录</legend>
                <div class="form-group">
                    <label for="username">用户名:</label>
                    <!-- autocomplete:"off"  关闭自动完成，鼠标点击输入框不会弹出内容-->
                    <input class="form-control" 
                        autocomplete="off"
                    type="text" id="username" name="username">
                </div>
                <div class="form-group" >
                    <label for="password">密码:</label>
                    <input class="form-control" type="password" id="password" name="password">
                </div>
                <div>
                    <!-- onclik（单击）事件，单击触发，里面函数，自定义这俩个函数js -->
                    <button id="btnSave" class="btn btn-primary" onclick="save()">保存</button>
                    <button id="btnClear" class="btn btn-danger" onclick="jsclear()">取消</button>
                </div>
            </fieldset>

    </div>
</body>
<script>
    // 点击保存按钮获取用户名和密码打印控制台
    function save(){
        console.log($("#username").val());
        console.log($("#password").val());
    }
    // 点击取消按钮，清楚输入框中的内容
    function jsclear(){
        $("#username").val('');
        $("#password").val('');
    }
    // 上面的方式前期绑定，jQuery后期绑定js，动态给按钮添加事件
    // 后期绑定实现步骤：1）获取按钮 2）click这里没有on 3）写匿名函数（安全）
    // $("#btnSave" id为btnsave的按钮).click(function(){}  匿名函数)
    $("#btnSave").click(function(){
        var username = $("#username").val();//获取到用户名
        var password = $("#password").val();//获取密码
        console.log(username+","+password);
    })
    // 直接在val方法中赋值
    $("#btnclear").click(function(){
        $("#username").val("");
        $("#password").val("");
    })
</script>
</html>